<!-- 拼团商品 -->
<template>
	<div class="group-item">
		<!-- 拼团图片 -->
		<div class="img-wrapper">
			<van-image width="100%" :src="thumb" />
			<div class="group-num">
				已拼团{{curCommodity.hasSaleNum}}件
			</div>
			<!-- 售罄 -->
			<div class="sale-over" v-if="curCommodity.stock === 0">
				已售罄
			</div>
		</div>
		<!-- 商品名称 -->
		<div class="shop-name">
			{{curCommodity.sname}}
		</div>
		<!-- 拼团信息 -->
		<div class="group-info">
			<van-icon name="cart-circle-o" color="red" size="1.5625rem" class="icon"/>
			<div class="group-type">{{item.g_type}}</div>
			<div class="shop-price">￥{{item.g_price}}</div>
			<div class="group-head">
				<!-- <van-image width="1.875rem" height="1.875rem" round
				v-for="(p,index) of item.groupPersons"
				:key="index"
				:src="p"/> -->
			</div>
			<div class="group-btn">
				<template v-if="curCommodity.stock === 0">
					<van-button disabled type="primary">已抢光</van-button>
				</template>
				<template v-else>
					<van-button type="info" hairline  size="large">去开团</van-button>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'GroupItem',
		data:function(){
			return {
				curCommodity:'',
				thumb:''
			}
		},
		mounted() {
			this.$store.commit({
				type:'selectById',
				formName:'commodities',
				id:this.item.sid
			})
			
			this.curCommodity = this.$store.state.res[0];
			this.thumb = this.curCommodity.pics[0];
		},
		props:['item']
	}
</script>

<style scoped="scoped">
	.group-item {
		margin: 10px 0;
		background-color: #fff;
		margin: 0.1875rem;
		border: 1px solid #aaa;
		border-radius: 0.1875rem;
	}

	.img-wrapper {
		position: relative;
	}
	
	.sale-over {
		width: 3.75rem;
		height: 3.75rem;
		line-height: 3.75rem;
		font-size: 0.875rem;
		border-radius: 1.875rem;
		background-color: #aaa;
		color: #fff;
		position: absolute;
		top: 0.625rem;
		right: 0.625rem;
	}
	.group-num {
		position: absolute;
		bottom:1.25rem;
		left: 0;
		padding: 0.3125rem 0.9375rem;
		background-color: red;
		color: #fff;
		font-size: 0.875rem;
	}

	.shop-name {
		font-size: 0.875rem;
		padding: 2px 3px;
		text-align: left;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.group-info {
		font-size: 0.875rem;
		display: flex;
		height: 1.875rem;
		line-height:  1.875rem;
		padding: 10px 5px;
	}
	.icon {
		flex: 1;
	}
	.group-type {
		flex: 3;
		color: #333;
	}
	.shop-price {
		flex: 3;
		font-size: 1rem;
		color: red;
		font-weight: 700;
	}
	.group-head {
		flex: 6;
	}
	.group-btn {
		flex: 4;
	}
	.group-head .van-image {
		margin: 0 3px;
	}
	.group-btn .van-button {
		width: 5rem;
		height: 1.875rem;
		font-size: 1rem;
	}
	/* .van-icon-cart-circle-o::before {
		vertical-align: top;
		margin-top: 0.3125rem;
	} */
</style>
